<template>
  <div class="dgtPage">
    <div class="tanchuang" v-if="state.tcShow">
      <div class="neirong">
        <img class="gb" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image/gb.png" alt="" @click="router.push({path:'/play'})">
        <img class="timu" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/timu.png" alt="">
        <div class="btnList">
          <div class="xaingxiangList">
            <div class="item" :class="state.xzIndex === 0 ? 'item_ac':''" @click="state.xzIndex = 0">
              <img src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/a8.png" alt="">
            </div>
            <div class="item" :class="state.xzIndex === 1 ? 'item_ac':''" @click="state.xzIndex = 1">
              <img src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/a9.png" alt="">
            </div>
            <div class="item" :class="state.xzIndex === 2 ? 'item_ac':''" @click="state.xzIndex = 2">
              <img src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/a10.png" alt="">
            </div>
          </div>
          <img class="queding" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/queidng.png" alt="" @click="queding">
        </div>
        <img class="xfy" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/xfy.png" alt="">
        <img class="yf" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/yf1.png" alt="">
        <img class="xj" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image/xiangji.png" alt="">
      </div>
    </div>
    <div v-if="state.tanchuangSbCG" class="tanchuangSbCG">
      <div class="neirong">
        <div class="topBox">
          <img v-if="state.xzIndex != 2" class="weitonghuan" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/hyh.png" alt="">
          <img v-if="state.xzIndex == 2" class="weitonghuan" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/gxn.png" alt="">
        </div>
        <img class="gb" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image/gb.png" alt="" @click="state.tanchuangSbCG = false">
        <div class="wtgBox">
          <img v-if="state.xzIndex != 2" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/nwtg.png" alt="">
          <img v-if="state.xzIndex == 2" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/tgcg.png" alt="">
        </div>
        <div v-if="state.xzIndex == 2" class="jsz">
          <img src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/jsz.png" alt="">
        </div>
        <div class="btnList">
          <img v-if="state.xzIndex != 2" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/zwyc.png" alt="" @click="state.tanchuangSbCG = false">
          <img v-if="state.xzIndex != 2" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/tiaoguo.png" alt="" @click="router.push({path:'/prizeDraw'})">
          <img v-if="state.xzIndex == 2 && !state.cjjlShow" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/ljcj.png" alt="" @click="router.push({path:'/prizeDraw'})">
          <img v-if="state.xzIndex == 2 && !state.cjjlShow" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/fhsy.png" alt="" @click="router.push({path:'/home'})">
        </div>
        <img class="xfy" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/xfy.png" alt="">
        <img class="yf" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image2/yf1.png" alt="">
        <img class="xj" src="https://vivo.zhongwangyingtong.com/vivoimage/assets/image/xiangji.png" alt="">
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { reactive, ref, onMounted} from 'vue';
import { useRouter } from 'vue-router';
import {Local, Session} from '../../utils/storage';
import { ElMessage } from 'element-plus';
const router = useRouter();
const state = reactive({
  tcShow:true,
  tanchuangSbCG:false,
  xzIndex: null,
  cjjl:{},
  cjjlShow:false,
});
const queding = () => {
  state.tanchuangSbCG = true
}
onMounted(() => {
  if(Local.get('cjjl')){
    state.cjjl = Local.get('cjjl')
    state.cjjlShow = true
  }
});
</script>

<style scoped lang="scss">
.dgtPage {
  width: 100%;
  height: 100%;
  background: url('https://vivo.zhongwangyingtong.com/vivoimage/assets/image3/playBc.png');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  position: relative;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  .tanchuang{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 26, 26, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    .neirong{
      background-color: #fef0ff;
      border-radius: 24px;
      box-sizing: border-box;
      width: 85%;
      position: relative;
      .timu{
        width: 70%;
        margin: 32px 0 16px 0;
      }
      .topBox{
        background-color: #bf78f7;
        width: 100%;
        height: 40px;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        .weitonghuan{
          height: 25px;
        }
      }
      .btnList{
        box-sizing: border-box;
        padding: 0 32px 32px 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 16px 0;
        .xaingxiangList{
          width: 80%;
          .item{
            width: 100%;
            height: 50px;
            border-radius: 50px;
            background-color: white;
            border: 1px solid black;
            margin-bottom: 16px;
            display: flex;
            align-items: center;
            justify-content: center;
            img{
              height: 25px;
            }
          }
          .item_ac{
            //background-color: #be6eec;
            background: linear-gradient(to top, #be6eec, #e1bdf6);
          }
        }
        .queding{
          width: 80%;
          margin-bottom: 30px;
        }
      }
      .xfy{
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
      }
      .gb{
        position: absolute;
        width: 40px;
        right: -15px;
        top: -15px;
      }
      .yf{
        position: absolute;
        width: 70px;
        left: -10px;
        bottom: 40px;
      }
      .xj{
        width: 70px;
        position: absolute;
        right: -25px;
        top: 50px;
      }
    }
  }
  .tanchuangSbCG{
    position: absolute;
    width: 100%;
    height: 100%;
    background-color: rgba(26, 26, 26, 0.45);
    display: flex;
    align-items: center;
    justify-content: center;
    .neirong{
      background-color: #fef0ff;
      border-radius: 24px;
      box-sizing: border-box;
      width: 85%;
      position: relative;
      .topBox{
        background-color: #bf78f7;
        width: 100%;
        height: 40px;
        border-top-left-radius: 24px;
        border-top-right-radius: 24px;
        display: flex;
        align-items: center;
        justify-content: center;
        .weitonghuan{
          height: 25px;
        }
      }
      .btnList{
        box-sizing: border-box;
        padding: 32px;
        display: flex;
        flex-direction: column;
        align-items: center;
        margin: 16px 0;
        img{
          width: 70%;
          margin-bottom: 30px;
        }
      }
      .xfy{
        position: absolute;
        bottom: -1px;
        left: 0;
        width: 100%;
      }
      .gb{
        position: absolute;
        width: 40px;
        right: -15px;
        top: -15px;
      }
      .yf{
        position: absolute;
        width: 70px;
        left: -10px;
        bottom: 40px;
      }
      .xj{
        width: 70px;
        position: absolute;
        right: -25px;
        top: 50px;
      }
      .jsz{
        img{
          width: 40%;
        }
      }
      .wtgBox{
        width: 70%;
        height: 50px;
        border-radius: 50px;
        background-color: white;
        border: 1px solid black;
        margin: 16px auto;
        display: flex;
        align-items: center;
        justify-content: center;
        img{
          height: 25px;
        }
      }
    }
  }
}
</style>
